import {Fragment} from 'react';
import {Row} from 'antd';
import {WeaInput, WeaInputNumber, WeaLocaleProvider, WeaSelect} from 'ecCom';
import defaultData from "./data";
import Props from "../base/Props";
import {ACCEPT_TYPE, CUSTOM} from '../../../../../constants/form';
import './Props.less';

const getLabel = WeaLocaleProvider.getLabel;

const MIN_FILE_SIZE = 0.01;
const MAX_FILE_SIZE = 200;
const maxFileNumOpts = new Array(15).fill(0).map((v, i) => {
  const key = i + 1;

  return { key, showname: key, selected: 0 === i };
});

export default class AttachmentProps extends Props {
  constructor(props) {
    super(props);

    const { maxSize } = props.data.restrictions;

    this.state = {
      isCustom: CUSTOM === maxSize.key,
      maxSizeValue: MIN_FILE_SIZE
    };
  }

  getFileTypeAcceptOpts() {
    return [
      { key: 'UNLIMITED', showname: getLabel('506486','不限制'), selected: true },
      { key: 'DOC', showname: getLabel('506487','文档类'), selected: true },
      { key: 'IMAGE', showname: getLabel('506488','图片类'), selected: true },
      { key: 'VIDEO', showname: getLabel('506489','视频类'), selected: true },
      { key: 'AUDIO', showname: getLabel('506490','音频类'), selected: true },
      { key: 'COMPRESS', showname: getLabel('506491','压缩包'), selected: true },
      { key: 'CUSTOM', showname: getLabel('506492','自定义'), selected: true },
    ];
  }

  handleAcceptType = key => {
    this.props.onChange('restrictions.fileType', key);
    return key;
  }

  handleCustomTypeChange = value => {
    this.props.onChange('restrictions.customType', value);
    return value;
  }

  getMaxSizeOpts() {
    return [
      { key: '1', showname: getLabel('502459','1MB(用于收集证件照)'), selected: true },
      { key: '5', showname: getLabel('502460','5MB(用于收集照片、一般文档)'), selected: true },
      { key: '10', showname: getLabel('502461','10MB(用于收集短视频)'), selected: true },
      { key: '20', showname: getLabel('502462','20MB(用于收集3分钟左右的视频)'), selected: true },
      { key: '50', showname: getLabel('502463','50MB(用于收集高清图片或视频)'), selected: true },
      { key: '100', showname: getLabel('502464','100MB(用于收集长视频)'), selected: true },
      { key: '-1', showname: getLabel('502465','自定义'), selected: true },
    ];
  }

  handleMaxSizeKey = key => {
    const isCustom = CUSTOM === key;
    const { maxSizeValue } = this.state;

    this.setState({ isCustom });
    this.props.onChange('restrictions.maxSize.value', isCustom ? maxSizeValue : key);

    return key;
  }

  handleMaxSizeValueChange = value => {
    this.setState({ maxSizeValue: value });
    this.props.onChange('restrictions.maxSize.value', value);
  }

  renderContent() {
    const { isCustom } = this.state;
    const {
      restrictions: { maxNum, maxSize, fileType, customType }
    } = this.props.data;

    const acceptType = fileType || 'UNLIMITED';

    return (
      <Fragment>
        <Row className='edc-sepline edc-row-hor'>
          <label>{getLabel('502466','最大文件数量')}</label>
          <div>
            <WeaSelect
              value={maxNum}
              style={{ width: '100%' }}
              options={maxFileNumOpts}
              onChange={this.handlePropChange('restrictions.maxNum')}
            />
          </div>
        </Row>
        <Row>
          <label>{getLabel('506493','文件上传类型')}</label>
          <div>
            <WeaSelect
                value={acceptType}
                style={{ width: '100%' }}
                options={this.getFileTypeAcceptOpts()}
                onChange={this.handlePropChange('restrictions.fileType', this.handleAcceptType)}
            />
            { acceptType != "CUSTOM" && acceptType != "UNLIMITED" ? <div className='custom-desc-wrapper'>
                  <div>{getLabel('506494','包括以下类型：')}</div>
                  {ACCEPT_TYPE[acceptType]}
                  <span>{getLabel('506495', '。如以上格式限制不满足需求，建议选择[自定义]文件上传类型。不支持上传EXE、BAT、HTML、HTM、SHTML、SHTM、JS、CSS格式的文件。')}</span>
                </div> :
                (
                    (!acceptType || acceptType == "UNLIMITED") ? null
                      :
                <div>
                  <div className='custom-desc-wrapper'>
                    <span>{getLabel('506496', '请输入自定义的文件扩展名，多个请用逗号隔开，如: txt, pdf, mp3等。 设置完毕后，填表者仅能上传你指定的文件类型。不支持上传EXE、BAT、HTML、HTM、SHTML、SHTM、JS、CSS格式的文件。')}</span>


                  </div>
                        <WeaInput
                value={customType}
                onChange={this.handlePropChange('restrictions.customType', this.handleCustomTypeChange)}
                />
                </div>

                )
            }
          </div>
        </Row>
        <Row>
          <label>{getLabel('502467','单个文件最大体积')}</label>
          <div>
            <WeaSelect
              value={maxSize.key}
              style={{ width: '100%' }}
              options={this.getMaxSizeOpts()}
              onChange={this.handlePropChange('restrictions.maxSize.key', this.handleMaxSizeKey)}
            />
            {!isCustom ? null :
              <div className='custom-size-wrapper'>
                <WeaInputNumber
                  value={maxSize.value}
                  min={MIN_FILE_SIZE}
                  max={MAX_FILE_SIZE}
                  precision={2}
                  onChange={this.handleMaxSizeValueChange}
                />
                <span className='size-unit'>M</span>
              </div>
            }
          </div>
        </Row>
      </Fragment>
    );
  }
}

AttachmentProps.defaultProps = {
  data: defaultData
};